const path = require('path')
const webpack = require('webpack')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const svgToMiniDataURI = require('mini-svg-data-uri')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

const toml = require('toml');
// const yaml = require('yamljs');
const json5 = require('json5');

// 尝试使用环境变量，否则使用根路径
const ASSET_PATH = process.env.ASSET_PATH || '/';

module.exports = (env) => {
    console.log('env', env);
    return {
         // entry: './src/index.js',
    entry: {
        index: './src/index.js',
        another: './src/another-module.js'
      },
      // 防止重复 - 同一个模块在不同的js文件中多次调用
      // 入口文件
      // entry: {
      //     index: {
      //         import: './src/index.js',
      //         dependOn: 'shared'
      //     },
      //     another: {
      //         import: './src/another-modules.js',
      //         dependOn: 'shared'
      //     },
      //     shared: 'lodash'
      // },
      // 出口文件
      output: {
          // filename: 'main.js',
          // name的值与entry的key值一致
          filename: 'js/[name].[contenthash:8].js',
          // 输出文件夹必须定义为绝对路径
          path: path.resolve(__dirname, 'dist'),
          // 打包前清理 dist 文件夹
          clean: true,
          // 将src/assets资源文件打包到dist下的images目录下
          // assetModuleFilename: 'images/[contenthash][ext][query]'
          
          // publicPath: ASSET_PATH,
          publicPath: 'auto',
      },
      // 优化配置
      optimization: {
          minimizer: [
              // 压缩css
              new CssMinimizerPlugin(),
          ],
          // SplitChunksPlugin
          splitChunks: {
              chunks: 'all',// 防止代码重复
              cacheGroups: {
                  vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all', 
                  },
                },
          },
      },
      // 插件
      plugins: [
          // 这可以帮助我们在代码中安全地使用环境变量
          new webpack.DefinePlugin({
              'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
          }),
          // 抽离压缩css
          new MiniCssExtractPlugin({ 
              filename: 'css/[contenthash].css'
          }),
          // 实例化 html-webpack-plugin 插件
          new HTMLWebpackPlugin({
              // 打包生成的文件的模板
              template: './index.html',
              // 打包生成的文件名称。默认为index.html
              // filename: 'app.html',
              // 设置所有资源文件注入模板的位置,可以设置的值 true|'head'|'body'|false,默认值为 true
              inject: 'body',
              // 在目标的html页面中添加meta标签
              meta: {
                  keywords: 'webpack, webpack5',
                  author: '小千千-千锋教育HTML5大前端教研院'
              },
              // 压缩html文件，生产环境默认为true,其余默认为false
              // 如果设置了 mode , 则不需要主动设置
              // minify: true
          })
      ],
      // 开发模式 -- development, 生产模式 -- production, 不使用任何默认优化选项 -- none
      // mode: 'development',
      mode: 'production',
      // 在开发模式下追踪代码
      devtool: 'inline-source-map',
      // 实现实时重新加载
      devServer: {
          static: './dist'
      },
      // 配置资源文件
      module: {
          rules: [
              // resource 资源类型
              // {
              //     test: /\.png$/,
              //     // 发送一个单独的文件并导出URL
              //     type: 'asset/resource',
              //     // 优先级高于 assetModuleFilename
              //     generator: {
              //         filename: 'images/[contenthash][ext][query]'
              //     }
              // },
              // inline 资源类型
              // {
              //     test: /\.svg/,
              //     // 导出一个资源的 data URI。
              //     type: 'asset/inline',
              //     // 自定义函数模块
              //     generator: {
              //         dataUrl: content => {
              //           content = content.toString();
              //           return svgToMiniDataURI(content);
              //         }
              //     }
              // },
              // 加载 js 文件
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                    loader: 'babel-loader',
                    options: {
                      presets: ['@babel/preset-env'],
                      plugins: [
                        [
                          '@babel/plugin-transform-runtime'
                        ]
                      ]
                    }
                  }
              },
              // 通用资源类型
              {
                  test: /\.(jpg|png|svg)$/,
                  type: 'asset', // 通用资源类型 `asset` ,  在导出一个 data URI 和发送一个单独的文件之间自动选择。
                  parser: {
                      dataUrlCondition: {
                          // 默认情况下，8kb为resource，生成图片，小于8KB，默认为base64
                          maxSize: 5 * 1024 // 5kb
                      }
                  }
              },
              // source 资源类型
              {
                  test: /\.txt$/,
                  type: 'asset/source'
              },
              // 加载 css
              {
                  test: /\.css$/,
                  // use: ['style-loader', 'css-loader']
                  use: [MiniCssExtractPlugin.loader, 'css-loader'] 
              },
              {
                  test: /\.less$/i,
                  // use: ['style-loader', 'css-loader', 'less-loader'],
                  use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
              },
              {
                  test: /\.scss$/i,
                  // use: ['style-loader', 'css-loader', 'sass-loader'],
                  use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
              },
              {
                  test: /\.stylus$/i,
                  // use: ['style-loader', 'css-loader', 'stylus-loader'],
                  use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader'],
              },
              // 加载 fonts 字体
              {
                  test: /\.(woff|woff2|eot|ttf|otf)$/i,
                  type: 'asset/resource',
              },
              // 加载数据
              {
                  test: /\.(csv|tsv)$/i,
                  use: ['csv-loader'],
              },
              {
                  test: /\.xml$/i,
                  use: ['xml-loader'],
              },
              // 自定义Json 模块 parser
              {
                  test: /\.toml$/i,
                  type: 'json',
                  parser: {
                    parse: toml.parse,
                  },
              },
              {
                  test: /\.json5$/i,
                  type: 'json',
                  parser: {
                    parse: json5.parse,
                  },
              }
             
          ]
      },
      // WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
      // 配置
      performance: { 
          maxEntrypointSize: 10 * 1024 * 1024, // 10M
          maxAssetSize: 30 * 1024 * 1024 // 30M
      }
    }
}